<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view class="address-edit-content">
		<view class="edit-wrap">
			<view class="tip" v-if="status==-1">申请商家入住</view>
			<view class="tip yello" v-if="status==0">已提交申请，正在审核中</view>
			<view class="tip green" v-if="status==1">您已经通过入住审核</view>
			<view class="tip red" v-if="status==2">入住申请被拒绝,理由{{reason}}</view>
			<view class="tip red" v-if="status==3">店铺已被关闭</view>
			<view class="edit-item">
				<text class="tit">
					店铺名称
					<text>*</text>
				</text>
				<input
					class="uni-input"
					type="text"
					placeholder-class="placeholder-class"
					placeholder="请输入店铺名称"
					maxlength="30" 
					v-model="formData.shopname"
					:disabled="status==1||status==3||status==0"
				/>
			</view>
			<view class="edit-item">
				<text class="tit">
					店铺Logo
					<text>*</text>
				</text> 
				 <image class="defaultlogo" :src="$util.img(defaultlogo)" @click="uploadImg()"></image>
			</view>
			<view class="edit-item">
				<text class="tit">真实姓名<text>*</text></text>
				
				<input
					class="uni-input"
					type="text"
					placeholder-class="placeholder-class"
					placeholder="请输入真实姓名"
					maxlength="20"
					v-model="formData.name"
					:disabled="status==1||status==3||status==0"
				/>
			</view>
			<view class="edit-item">
				<text class="tit">
					电话号码
					<text>*</text>
				</text>
				<input class="uni-input" 
					:disabled="status==1||status==3||status==0" type="number" placeholder-class="placeholder-class"  placeholder="请输入电话号码" maxlength="11" v-model="formData.mobile" />
			</view>
			<view class="edit-item">
				<text class="tit">身份证号<text>*</text></text>
				<input
					class="uni-input"
					type="text"
					placeholder-class="placeholder-class"
					 placeholder="请输入身份证号码"
					maxlength="30"
					v-model="formData.id_card"
					:disabled="status==1||status==3||status==0"
				/>
			</view>
			 <view class="edit-item">
			 	<text class="tit">微信号<text>*</text></text>
			 	<input
			 		class="uni-input"
			 		type="text"
			 		placeholder-class="placeholder-class"
			 		placeholder="请输入微信号"
			 		maxlength="30"
			 		v-model="formData.wechatno"
					:disabled="status==1||status==3||status==0"
			 	/>
			 </view>
			 <view class="edit-item">
			 	<text class="tit">支付宝号<text>*</text></text>
			 	<input
			 		class="uni-input"
			 		type="text"
			 		placeholder-class="placeholder-class"
			 		placeholder="请输入支付宝号"
			 		maxlength="30"
			 		v-model="formData.alpayno"
					:disabled="status==1||status==3||status==0"
			 	/>
			 </view>
			 <view class="edit-item">
			 	<text  class="tit2">身份证正面<text>*</text></text>			 	
			 </view>
			 <view class="edit-item"><image class="imgcart" :src="$util.img(defaultcart1)" @click="uploadImg2()"></image></view>
			 <view class="edit-item">
			 	<text  class="tit2">身份证反面<text>*</text></text>			 	
			 </view>
			 <view class="edit-item"><image class="imgcart" :src="$util.img(defaultcart2)" @click="uploadImg3()"></image></view>
		</view>
		<view class="btn">
			<button type="primary" class="add" :disabled="status==1||status==3||status==0" @click="saveAddress">确认申请</button>
		</view>

		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
import pickRegions from '@/components/pick-regions/pick-regions.vue';
import validate from 'common/js/validate.js';
import Config from '@/common/js/config.js';
export default {
	components: {
		pickRegions
	},
	data() {
		return {
			formData: {
				id: 0,
				shopname: '',
				shoplogo: '',
				name: '',
				id_card: '',
				mobile: '',
				wechatno: '', 
				alpayno: '', 
				id_card_pic1: '',
				id_card_pic2: ''  
			},
			address: '',
			addressValue: '',
			back: '', // 返回页
			redirect: 'redirectTo', // 跳转方式
			flag: false, //防重复标识
			defaultRegions: [],
			status: -1,
			reason:'',
			defaultlogo:'upload/uniapp/shop_uniapp/index/set_shop.png',
			defaultcart1:'upload/uniapp/img_preview.png',
			defaultcart2:'upload/uniapp/img_preview.png'
		};
	},
	onLoad(option) { 
		 
		 	this.getProxyDetail(); 
		 
	},
	onBackPress() {
		uni.setStorageSync('addressInfo', '');
	},
	onShow() {
		if (uni.getStorageSync('token')) {
			 
		} else {
			this.$util.redirectTo('/pages_tool/login/login');
			return;
		}
		uni.setNavigationBarTitle({
			title: '申请商家入住'
		});
	},
	onReady() {
		this.$refs.loadingCover.hide();
	},
	onHide() {
		this.flag = false;
	},
	methods: {
		// 获取地址信息
		getProxyDetail() {
			this.$api.sendRequest({
				url: '/api/memberproxy/info',
				data: {},
				success: res => {
					//console.log("..........",JSON.stringify(res))
					let data = res.data;
					if (data != null) {
						this.formData.id = data.id;
						this.formData.shopname = data.shop_name;
						this.formData.shoplogo = data.shop_logo;
						this.defaultlogo = data.shop_logo;
						this.formData.name = data.name;
						this.formData.id_card = data.id_card;
						this.formData.mobile = data.mobile;
						this.formData.wechatno = data.wechatno;
						this.formData.alpayno = data.alpayno; 
						this.formData.id_card_pic1 = data.id_card_pic1;
						this.formData.id_card_pic2 = data.id_card_pic2;
						this.defaultcart1 = data.id_card_pic1;
						this.defaultcart2 = data.id_card_pic2;
						this.reason=data.reason;
						this.status=data.status;
						
						 
					}
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: res => {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
		//获取详细地址
		getAddress(value) {
			this.$api.sendRequest({
				url: '/api/memberaddress/tranAddressInfo',
				data: {
					latlng: value
				},
				success: res => {
					if (res.code == 0) {
						 
						this.addressValue = '';
						this.addressValue += res.data.province_id != undefined ? res.data.province_id : '';
						this.addressValue += res.data.city_id != undefined ? '-' + res.data.city_id : '';
						this.addressValue += res.data.district_id != undefined ? '-' + res.data.district_id : '';
					} else {
						this.showToast({
							title: '数据有误'
						});
					}
				}
			});
		},
 
  
      uploadImg(){
		  if(this.status==0||this.status==1){
			  return false;
		  }
		this.$util.upload(
			1,
			{
				path: 'proxy'
			},
			res => { 
				 this.defaultlogo=res[0];
				 this.formData.shoplogo=res[0];
			}
		);  
	  },
	  uploadImg2(){
		  if(this.status==0||this.status==1){
		  			  return false;
		  }
	  		this.$util.upload(
	  			1,
	  			{
	  				path: 'proxy'
	  			},
	  			res => { 
	  				 this.defaultcart1=res[0];
					 this.formData.id_card_pic1=res[0];
	  			}
	  		);  
	  },	  
	  uploadImg3(){
		  if(this.status==0||this.status==1){
		  			  return false;
		  }
	  		this.$util.upload(
	  			1,
	  			{
	  				path: 'proxy'
	  			},
	  			res => { 
	  				 this.defaultcart2=res[0];
					 this.formData.id_card_pic2=res[0];
	  			}
	  		);  
	  },
		getQueryVariable(variable) {
			var query = window.location.search.substring(1);
			var vars = query.split('&');
			for (var i = 0; i < vars.length; i++) {
				var pair = vars[i].split('=');
				if (pair[0] == variable) {
					return pair[1];
				}
			}
			return false;
		},
		vertify() { 
			this.formData.shopname = this.formData.shopname.trim();
			this.formData.name = this.formData.name.trim();
			this.formData.id_card = this.formData.id_card.trim();
			this.formData.mobile = this.formData.mobile.trim();
			this.formData.wechatno = this.formData.wechatno.trim();
			this.formData.alpayno = this.formData.alpayno.trim(); 
			var rule = [
				{
					name: 'shopname',
					checkType: 'required',
					errorMsg: '请输入店铺名字'
				},
				{
					name: 'shoplogo',
					checkType: 'required',
					errorMsg: '请上传店铺Logo'
				},				
				{
					name: 'name',
					checkType: 'required',
					errorMsg: '请输入真实姓名'
				}, 
				{
					name: 'mobile',
					checkType: 'required',
					errorMsg: '请输入手机号'
				},
				{
					name: 'mobile',
					checkType: 'phoneno',
					errorMsg: '请输入正确的手机号'
				},		 				
				{
					name: 'id_card',
					checkType: 'required',
					errorMsg: '请输入身份证号'
				},				 
				{
					name: 'wechatno',
					checkType: 'required',
					errorMsg: '微信号不能为空'
				},				 
				{
					name: 'alpayno',
					checkType: 'required',
					errorMsg: '支付宝号不能为空'
				},				 
				{
					name: 'id_card_pic1',
					checkType: 'required',
					errorMsg: '请上传身份证正面'
				},				 
				{
					name: 'id_card_pic2',
					checkType: 'required',
					errorMsg: '请上传身份证反面'
				}
			];
			var checkRes = validate.check(this.formData, rule);
			if (checkRes) {
				let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if(reg.test(this.formData.id_card) === false){
					this.$util.showToast({
						title: '请输入正确身份证号码'
					});
					this.flag = false;
					return false;
				}else{
					return true;
				}
				
			} else {
				this.$util.showToast({
					title: validate.error
				});
				 this.flag = false;
				return false;
			}
		},
		saveAddress() {
			if (this.flag) return;
			this.flag = true;
			if (this.vertify()) {
				let  data = {}, url = '';
 
				
				data = {
					shopname: this.formData.shopname,
					shoplogo: this.formData.shoplogo,
					name: this.formData.name,
					id_card: this.formData.id_card,
					mobile: this.formData.mobile,
					wechatno: this.formData.wechatno,	 
					alpayno: this.formData.alpayno, 
					id_card_pic1: this.formData.id_card_pic1,
					id_card_pic2: this.formData.id_card_pic2 
				};

				url = 'add';
				if (this.formData.id) {
					url = 'edit';
					data.id = this.formData.id;
					 
				}
				this.$api.sendRequest({
					url: '/api/memberproxy/' + url,
					data: data,
					success: res => {
						this.flag = false;

						if (res.code == 0) {
							this.$util.showToast({
								title: res.message
							}); 
							setTimeout(() => {
								this.$util.redirectTo('/pages/member/index');
							}, 1000)
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
					},
					fail: res => {
						this.flag = false;
					}
				});
			}
		}
	}
};
</script>

<style lang="scss">
/deep/ pick-regions,
.pick-regions {
	flex: 1;
}

.edit-wrap {
	background: #fff;
	overflow: hidden; 
	.tip {
		padding: 20rpx 30rpx 10rpx;
		background-color: #f8f8f8;
		color: $color-tip;
	}
	.green{
		color:#006600;
	}
	.yello{
		color:#ff9933;
	}
	.red{
		color:#ff0000;
	}
}

.edit-item {
	display: flex;
	align-items: center;
	margin: 0 30rpx;
	min-height: 100rpx;
	background-color: #fff;

	.text_inp {
		margin-left: $margin-updown;
		flex: 1;
	}
   .defaultlogo{
	   width:90rpx;
	   height:70rpx;
	   margin-left:50rpx;
	   border-radius: 10rpx;
   }
   .imgcart{
	   width:500rpx;
	   height:200rpx;
	   margin:auto;
	   margin-top:5rpx;
	   margin-bottom:5rpx;
   }
	.tit {
		width: 148rpx;

		text {
			margin-left: 10rpx;
			color: #ff4544;
		}

		&.margin_tit {
			align-self: flex-start;
			margin-top: 24rpx;
		}
	}
	.tit2 {
			width: 188rpx;

			text {
				margin-left: 10rpx;
				color: #ff4544;
			}

			&.margin_tit {
				align-self: flex-start;
				margin-top: 24rpx;
			}
		}
	.icon-location {
		color: #606266;
		align-self: flex-start;
		margin-top: 20rpx;
	}

	.select-address {
		display: block;
		margin-left: 10rpx;

		&.empty {
			color: #808080;
		}
	}

	textarea,
	input {
		flex: 1;
		font-size: $font-size-base;
		margin-left: 20rpx;
		padding: 0;
	}

	textarea {
		margin-top: 6rpx;
		height: 100rpx;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
		line-height: 50rpx;
	}
}

.edit-wrap > .edit-item + .edit-item {
	border-top: 2rpx solid #ebedf0;
}

.add {
	margin-top: 30rpx;
	margin-bottom:30rpx;
	height: 80rpx;
	line-height: 80rpx !important;
	border-radius: 80rpx;
	font-weight: 500;
	width: calc(100% - 60rpx);
	margin-left: 30rpx;
	font-size: 32rpx;
}

.btn {
	 
	width: 100%;
	padding-bottom: constant(safe-area-inset-bottom);
	/*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom);
	/*兼容 IOS>11.2*/
}
.address-edit-content{
	padding-bottom:20rpx;
}
</style>
